<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <style media="screen">
    body, html {
      height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: "Keania One", verdana;
      background-color: black;
      color: #008209;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    div.clock {
      width: 339px;
      border: solid 1px;
      height: 80px;
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
    }

    div.clock span {
      font-size: 3em;
    }

    div.clock button {
      position: absolute;
      top: .2em;
      right: .2em;
      padding: .4em;
      font-size: .8em;
      line-height: .8em;
      font-weight: bold;
      color: #008209;
      background-color: black;
      border: solid 1px #008209;
    }

    div.clock button:hover {
      background-color: #008209;
      color: black;
      border: none;
      cursor: pointer;
    }
    </style>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Libraries</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

      const startTicking = () =>
        setInterval(
          compose(
            getCurrentTime,
            abstractClockTime,
            convertToCivilianTime,
            doubleDigits,
            render(AlarmClockDisplay)
          ),
          oneSecond()
        )

      const AlarmClockDisplay = ({hours, minutes, seconds, ampm}) =>
        <div className="clock">
          <span>{hours}</span>
          <span>:</span>
          <span>{minutes}</span>
          <span>:</span>
          <span>{seconds}</span>
          <span>{ampm}</span>
        </div>

      const render = Component => civilianTime =>
        ReactDOM.render(
          <Component {...civilianTime} />,
          document.getElementById('react-container')
        )

      const oneSecond = () => 1000
      const getCurrentTime = () => new Date()

      const clear = () => console.clear()
      const log = message => console.log(message)

      const abstractClockTime = date =>
        ({
          hours: date.getHours(),
          minutes: date.getMinutes(),
          seconds: date.getSeconds()
        })

      const civilianHours = clockTime =>
        ({
          ...clockTime,
          hours: (clockTime.hours > 12) ? clockTime.hours - 12 : clockTime.hours
        })

      const appendAMPM = clockTime =>
        ({
          ...clockTime,
          ampm: (clockTime.hours >= 12) ? "PM" : "AM"
        })

      const display = target => time => target(time)
      const formatClock = format =>
        time =>
          format.replace("hh", time.hours)
            .replace("mm", time.minutes)
            .replace("ss", time.seconds)
            .replace("tt", time.ampm)

      const compose = (...fns) =>
        (arg) =>
          fns.reduce(
            (composed, f) => f(composed),
            arg
          )

      const convertToCivilianTime = clockTime =>
        compose(
          appendAMPM,
          civilianHours
        )(clockTime)

      const prependZero = key => clockTime =>
        ({
          ...clockTime,
          [key]: (clockTime[key] < 10) ? "0" + clockTime[key] : clockTime[key]
        })

      const doubleDigits = civilianTime =>
        compose(
          prependZero("hours"),
          prependZero("minutes")
        )(civilianTime)

      startTicking()


  </script>
</body>
</html>
